import React from "react";
import "./Login.css";
import {useNavigate} from "react-router-dom"

const Login = () => {
    const navigate = useNavigate()
    const LoginClick = () => {
            navigate("/home")
    }
    return (
        <div>
            <div className="cir1"></div>
            <div className="cir2"></div>
            <div className="cir3"></div>
            <div style={{ filter: "blur(20px)", zIndex: "1" }} className="cir1"></div>
            <div style={{ filter: "blur(25px)", zIndex: "1" }} className="cir2"></div>
            <div style={{ filter: "blur(20px)", zIndex: "1" }} className="cir3"></div>

            <div id="bgdiv">
                <div></div>
                <div id="div1">
                    <span id="spanlog" >
                        登录
                    </span>
                    <span id="spanreg">
                        注册
                    </span>
                </div>

                <div className="divinput">
                    <span id="spanicon1" className="iconfont">
                        &#xe639;
                    </span>
                    <span className="suspend">请输入账号</span>
                    <span id="username">未输入账号</span>
                    <input
                        type="text"
                        name="username"
                        autoComplete="off"
                        id="input1"
                    />
                </div>

                <div className="divinput">
                    <span id="spanicon2" className="iconfont">
                        &#xe83e;
                    </span>
                    <span className="suspend">请输入密码</span>
                    <span id="password">未输入密码</span>
                    <input
                        type="password"
                        name="userpassword"
                        id="input2"
                    />
                </div>
                
                <div style={{margin: "15px 0px" }}>
                    <span id="span1">
                        <label htmlFor="remember">
                            <input type="checkbox" id="remember" />
                            <span></span>&ensp;记住此密码
                        </label>
                    </span>
                    <span id="span2">忘记密码</span>
                </div>

                <div style={{margin: "15px 0px" }} onClick={LoginClick}>
                    <p id="login" >
                        登录
                    </p>
                </div>
                
                <div style={{ margin: "8px 0px" }} className="div2">
                    <div>
                        <span style={{ color: "#51B7EC", cursor: "pointer" }} className="iconfont2">
                            &#xe882;
                        </span>
                    </div>
                    <div>
                        <span style={{color: "#3CCC4D",cursor: "pointer"}} className="iconfont2">
                            &#xe600;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Login;
